<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
	<title>登录</title>
	<link rel="stylesheet" href="css/mui.min.css" />
	<link rel="stylesheet" href="css/login.css" />
	<style type="text/css">
		.cs_mask{background-color: rgba(0,0,0,0.5);position: fixed;top: 0;left: 0;width: 100vw;height: 100vh;z-index: 999;display: none;}
		/*弹窗盒子*/
		.cs_layer_box{width: 90vw;margin: 0 auto;background-color: #fff;border-radius: 10px;overflow: hidden;margin-top: calc(50vh - 34vw);text-align: center;padding: 4rem 0;position: relative;}
		.cs_layer_box input{width: 83%;margin: 0 auto;display: inline-block;margin-bottom: 2rem;border: none;border-radius: 0;border-bottom: 1px solid #d7d8da;}
		.cs_nextbtn{width: 83%;height: 44px;background-color: #f77b00;border: none;color: #fff;box-shadow: 0 5px 8px #f9dcb7;}
		.cs_icon_phone{width: 13px;height: 20px;background-image: url(img/phone.png);display: block;background-position: center;background-repeat: no-repeat;background-size: 100% 100%;position: absolute;right: 10%;top: .6rem;}
		.cs_icon_pwd{width: 13px;height: 20px;background-image: url(img/pwd.png);display: block;background-position: center;background-repeat: no-repeat;background-size: 100% 100%;position: absolute;right: 10%;top: .6rem;}
		.cs_input_box{position: relative;}
		.cs_yan_box{position: absolute;right: 10%;background-color: #f77b00;color: #fff;height: 38px;line-height: 38px; padding: 0 19px;border-radius: 19px;margin-top: -3px;}
		.cs_close_btn{background-image: url(img/close_x.png);display: block;width: 30px;height: 30px;position: absolute;right: 10px;background-position: center;background-repeat: no-repeat;background-size: 60% 60%;top: 10px;}
		.modificat_pwd{display: none;}
		.cs_disable{background-color: #9d9d9d !important;}
	</style>
	<script type="text/javascript" src="js/mui.min.js"></script>
	<script type="text/javascript" src="js/jquery.min.js"></script>
	
</head>
<body>
	<header id="header" class="mui-bar mui-bar-nav jjs-header">
		<h2 class="mui-title">登录</h2>
		<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left header-left"></a>
		<a class="mui-icon mui-icon-bars mui-pull-right header-right"></a>
	</header>
	<div class="mui-content">
		<div class="jjs-logo"></div>
		<form class="mui-input-group login-form">
			<div class="mui-input-row phone-input">
				<input type="text" placeholder="请输入邮箱/手机号">
				<i></i>
			</div>
			<div class="mui-input-row pwd-input">
				<input type="password" placeholder="请输入密码">
				<i></i>
			</div>
			<button type="button" class="mui-btn mui-btn-block login-btn" onclick="login()">立即登录</button>
		</form>
		<div class="mui-row login-list">
	        <div class="mui-col-sm-6 mui-col-xs-6">
                <a class="res-btn" href="#">注册账号</a>
	        </div>
	        <div class="mui-col-sm-6 mui-col-xs-6 forget-btn">
                <a class=""  href="#" onclick="forget()">忘记密码</a>
	        </div>
	    </div>
	    <div class="choose-login">
	    	<p class="link">
	    		<span>OR</span>
	    	</p>
	    	<ul class="mui-table-view mui-grid-view mui-grid-9 list">
	            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
	            	<a href="#">
	                    <span class="mui-icon icon-qq icon"></span>
	            	</a>
	            </li>
	            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
	            	<a href="#">
	                    <span class="mui-icon icon-wx icon"></span>
	            	</a>
	            </li>
	            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
	            	<a href="#">
	                    <span class="mui-icon icon-sina icon"></span>
	            	</a>
	            </li>
	        </ul>
	    </div>
	</div>
	
	<div class="cs_mask">
		<div class="cs_layer_box code_check">
			<span class="cs_close_btn" onclick="cs_close()"></span>
			<div class="cs_input_box">
				<input type="text" name="" id="phone" value="" placeholder="请输入手机号"/>
				<i class="cs_icon_phone"></i>
			</div>
			<div class="cs_input_box">
				<input type="text"  placeholder="请输入验证码"/>
				<span class="cs_yan_box" onclick="get_code()">获取验证码</span>
			</div>
			
			<button class="cs_nextbtn" onclick="next()">下一步</button>
		</div>
		
		<div class="cs_layer_box modificat_pwd">
			<span class="cs_close_btn" onclick="cs_close()"></span>
			<div class="cs_input_box">
				<input type="password" name="" id="" value="" placeholder="重新设置密码"/>
				<i class="cs_icon_pwd"></i>
			</div>
			<div class="cs_input_box">
				<input type="password"  placeholder="确认你的密码"/>
				<i class="cs_icon_pwd"></i>
			</div>
			
			<button class="cs_nextbtn" onclick="do_modificat()">确认修改</button>
		</div>
		
	</div>
	<script>
		function login(){
			var phoneVal = $(".phone-input input").val()
			var pwdVal = $(".pwd-input input").val();
			var regrealphone = /^1[3|4|5|7|8][0-9]{9}$/;//手机号码
			if(phoneVal == ''){
				mui.alert('','请输入邮箱/手机号')
			}
			else if(!regrealphone.test(phoneVal)){
				mui.alert('','您输入的的手机号码有误！');
				
			}
			else if(phoneVal != '' && pwdVal == ''){
				mui.alert('','请输入密码')
			}
		}
		
		function cs_close () {
			$('.cs_mask').hide()
		}
		function forget () {
			$('.cs_mask').show()
		}
		
		function next () {
			$('.code_check').hide(800,function  () {
				$('.modificat_pwd').show(500);
			})
		}
		
		function do_modificat () {
			mui.toast('修改成功');
			setTimeout(function  () {
				location.href='index';
			},1000)
		}
		
		var regrealphone = /^1[3|4|5|7|8][0-9]{9}$/;//手机号码
		function get_code () {
				if($('.cs_yan_box').hasClass('cs_disable')){
					return mui.toast('请稍后再试~');
				}
				var phone = $("#phone").val();
				if(!regrealphone.test(phone)){
				 	return	mui.alert('','您输入的的手机号码有误！');
				}
				$.ajax({
					url:'',
					dataType:'json',
					type:'post',
					data:{phone:phone},
					success:function  (ret) {
						if(true){
							mui.toast('验证码发送成功！，有效期xxxxx');
							var nums = 6;
							var timer1 = setInterval(function  () {
								nums--;
								if(nums<1){
									$('.cs_yan_box').removeClass('cs_disable');
									$('.cs_yan_box').text('获取验证码');
									clearInterval(timer1);
									return false;
								}
								$('.cs_yan_box').addClass('cs_disable');
								$('.cs_yan_box').text(nums+'秒后再试')
							},1000)
						}else{
							mui.toast('验证码发送失败！');
						}
					},
					error:function(err){
						console.log(err);
						
						mui.toast('验证码发送成功！，有效期xxxxx');
							var nums = 6;
							var timer1 = setInterval(function  () {
								nums--;
								if(nums<1){
									$('.cs_yan_box').removeClass('cs_disable');
									$('.cs_yan_box').text('获取验证码');
									clearInterval(timer1);
									return false;
								}
								$('.cs_yan_box').addClass('cs_disable');
								$('.cs_yan_box').text(nums+'秒后再试')
							},1000)
						
					}
				})
			}
	</script>
</body>
</html>